<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="shortcut icon"  th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script>
        var screenWidth = document.documentElement.clientWidth;
        layui.use(['table','jquery','laydate'], function(){
            var table = layui.table
            ,$ =layui.jquery,
            laydate = layui.laydate;
            laydate.render({
                elem: '#begin-date'

            });
            laydate.render({
                elem: '#end-date'

            });
            table.render({
                id:'tableAll'
                ,elem: '#test'//绑定表格
                //数据来源
                ,url:'/reimbursement/getReimbursementApplications'//绑定数据来源
                ,toolbar: '#toolbarDemo'//绑定三个按钮
                ,title: '所有人报销申请表'
                ,page: true
                ,width:screenWidth
                ,cellMinWidth:60
                ,where : {
                    staffName:'',
                    enable:'',
                    beginDate :'',
                    endDate:''
                }
                ,cols: [
                    [
                        {field:'time', title:'申请日期',  edit: 'text', sort: true,templet:'<div>{{ layui.util.toDateString(d.time, "yyyy-MM-dd") }}</div>'}
                        ,{field:'dictionaryReimbursementType', title:'报销类型',  sort: true,  templet: '<div>{{d.dictionary.value}}</div>'}
                        ,{field:'staffName', title:'申请人',  sort: true,  templet:'<div>{{d.staff.name}}</div>'}
                        ,{field:'numbering', title:'工号', unresize: true,templet:'<div>{{d.staff.jobNumber}}</div>'}
                        ,{field:'aircrafTicket', title:'报销金额（人民币：元）',minWidth:200}
                        // ,{field:'id', title:'id',minWidth:200}
                        ,{fixed: 'right', title:'操作',minWidth:200, toolbar: '#barDemo'}
                    ]
                ]
            });
            //条件查询
            $('#searchBtn').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        staffName : $('#demoReload').val(),
                        enable:'',
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            //已驳回
            $('#searchReject').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        staffName: $('#demoReload').val(),
                        enable:0,
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            //已通过
            $('#searchPass').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        staffName : $('#demoReload').val(),
                        enable:2,
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            //审核中
            $('#searchProcessing').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        staffName : $('#demoReload').val(),
                        enable:1,
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month
                    + seperator1 + strDate + " " + date.getHours() + seperator2
                    + date.getMinutes() + seperator2 + date.getSeconds();
                return currentdate;
            }
            //工具栏事件 识别lay event
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                        break;
                };
            });

            //监听工具条 'tool(test)'要手动修改 tool是和  test是和table的lay-filter属性绑定
            table.on('tool(test)', function(obj){

                var data = obj.data;
                 if(obj.event === 'seeDetails'){
                    //alert(data.enable);
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                     if(data.enable==1){
                         parent.layer.open({
                             title:'报销申请',
                             type:2,
                             content:'/reimbursement/reimbursementDetails?id='+data.id+'&typeId='+data.dictionary.id+'&enable='+data.enable,
                             area: ['1200px', '600px'],
                             btn:['驳回','通过'],
                             yes:function(index, layero){
                                 parent.layer.prompt({
                                     formType: 2,
                                     value: '',
                                     title:'请输入驳回原因',
                                     btn:['确定','返回'],
                                     zIndex:layer.zIndex,
                                     yes:function(index, layero) {
                                         var rejectRemark = layero.find(".layui-layer-input").val();
                                         if (rejectRemark == ""){
                                             parent.layer.msg("请输入驳回原因")
                                         } else {
                                             $.ajax({
                                                 url:'/reimbursement/rejectTheApplication',
                                                 data:{"id":data.id,"enable":0,"rejectRemark":rejectRemark,"travelApplicationId":data.travelApplicationId,"dictionary.id":data.dictionary.id}
                                             })
                                             parent.layer.closeAll();
                                             parent.layer.msg("驳回申请")
                                         }

                                     }
                                 })

                             },
                             btn2:function(index, layero){

                                 $.ajax({
                                     url:'/reimbursement/rejectTheApplication',
                                     data:{"id":data.id,"enable":2,"dictionary.id":data.dictionary.id}
                                 })
                                 layer.msg("通过申请")
                             },
                             shade: [0.3, '#393D49'],
                             shadeClose:false,
                             moveOut:true,
                         })
                 }
                     else{
                         parent.layer.open({
                             title:'报销申请',
                             type:2,
                             content:'/reimbursement/reimbursementDetails?id='+data.id+'&typeId='+data.dictionary.id+'&enable='+data.enable,
                             area: ['1200px', '600px'],
                             shade: [0.3, '#393D49'],
                             shadeClose:false,
                             moveOut:true,
                         })
                     }

                }
            });
        });
    </script>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="seeDetails">查看详情</a>

        {{# if(d.enable === 0 ){ }}
        <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">已驳回</button>
        {{# } }}

        {{# if(d.enable === 2 ){ }}
        <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">已通过</button>
        {{# } }}

    </script>
</head>
<body>
<form>
    搜索申请人：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    申请时间:
    <div class="layui-input-inline">
        <input type="text" th:autocomplete="off"  name="beginDate" id="begin-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
    </div> ——
    <div class="layui-input-inline">
        <input type="text" th:autocomplete="off"  name="endDate" id="end-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn" id="searchBtn">搜索</button>
    <button class="layui-btn" type="reset" >重置</button>
    <button class="layui-btn" id="searchReject">已驳回</button>
    <button class="layui-btn" id="searchPass">已通过</button>
    <button class="layui-btn" id="searchProcessing">审核中</button>

</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>
</html>